<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>Dynatree - Example</title>

	<script src='../jquery/jquery.js' type='text/javascript'></script>
	<script src='../jquery/ui.core.js' type='text/javascript'></script>
    <script src='../jquery/jquery.cookie.js' type='text/javascript'></script>

	<link href='../src/skin/ui.dynatree.css' rel='stylesheet' type='text/css'>
	<script src='../src/jquery.dynatree.js' type='text/javascript'></script>

    <!-- jquery.contextmenu (using online libs ) -->
	<script src="http://abeautifulsite.net/notebook_files/80/jquery.contextMenu.js" type="text/javascript"></script>
	<link href="http://abeautifulsite.net/notebook_files/80/jquery.contextMenu.css" rel="stylesheet" type="text/css" >

	<!-- Start_Exclude: This block is not part of the sample code -->
	<link href="prettify.css" rel="stylesheet">
	<script src="prettify.js" type='text/javascript'></script>
	<link href='sample.css' rel='stylesheet' type='text/css'>
    <script src='sample.js' type='text/javascript'></script>
	<!-- End_Exclude -->

    <script type='text/javascript'>

    // Implement Cut/Copy/Paste
	var clipboardNode = null;
	var pasteMode = null;
	
	function copyPaste(action, dtnode) {
		switch( action ) {
		case "cut":
		case "copy":
			clipboardNode = dtnode;
			pasteMode = action;
			break;
		case "paste":
			if( !clipboardNode ) {
				alert("Clipoard is empty.");
				break;
			}
			if( pasteMode == "cut" ) {
				// TODO: check for recursion
				alert("TODO.");
			} else {
				// Copy mode: prevent duplicate keys:
				var cb = clipboardNode.toDict(true, function(dict){
					dict.title = "Copy of " + dict.title;
					delete dict.key; // prevent duplicta keys
				});
				dtnode.append(cb);
			}
			clipboardNode = pasteMode = null;
			break;
		default:
			alert("Unknown action '" + action + "'");
		}
	};
	
	$(function(){

		$("#tree").dynatree({
			persist: true,
			onActivate: function(dtnode) {
				$("#echoActivated").text(dtnode.data.title);
			},
			onClick: function(dtnode, event) {
				// Eat keyboard events, when a menu is open
				if( $(".contextMenu:visible").length > 0 )
					return false;
			},
			onKeydown: function(dtnode, event) {
				// Eat keyboard events, when a menu is open
				if( $(".contextMenu:visible").length > 0 )
					return false;
				switch( event.which ) {

				// Open context menu on [Space] key (simulate right click)
				case 32: // [Space]
					$(dtnode.span).trigger("mousedown", {
						preventDefault: true,
						button: 2
						})
					.trigger("mouseup", {
						preventDefault: true,
						pageX: dtnode.span.offsetLeft,
						pageY: dtnode.span.offsetTop, 
						button: 2
						});
					return false;

				// Handle Ctrl-C, -X and -V 
				case 67:
					if( event.ctrlKey ) { // Ctrl-C
						copyPaste("copy", dtnode);
						return false;
					}
					break;
				case 86:
					if( event.ctrlKey ) { // Ctrl-V
						copyPaste("paste", dtnode);
						return false;
					}
					break;
				case 120:
					if( event.ctrlKey ) { // Ctrl-X
						copyPaste("cut", dtnode);
						return false;
					}
					break;
				}
			}
		});
		
		// Add context menu to document nodes:
		$(".ui-dynatree-document").contextMenu({menu: "myMenu"}, function(action, el, pos) {
			var dtnode = el.attr("dtnode");
			switch( action ) {
			case "cut":
			case "copy":
				clipboardNode = dtnode;
				pasteMode = action;
				break;
			case "paste":
				if( !clipboardNode ) {
					alert("Clipoard is empty.");
					break;
				}
				if( pasteMode == "cut" ) {
					// TODO: check for recursion
					alert("TODO.");
				} else {
					// Copy mode: prevent duplicate keys:
					var cb = clipboardNode.toDict(true, function(dict){
						dict.title = "Copy of " + dict.title;
						delete dict.key; // prevent duplicta keys
					});
					dtnode.append(cb);
				}
				clipboardNode = pasteMode = null;
				break;
			default:
				alert("Todo: appply action '" + action + "' to node " + dtnode);
			}
		});
	});
</script>
</head>

<body class="example">
	<h1>Example: Context Menu</h1>
	<p class="description">
		Implementation of a context menu. Right-click a <i>document</i> node and see what happens.<br>
    	Also [space] key is supported to open the menu.<br>
    	<br>
    	A keyboard handler implements Copy and Paste with <code>Ctrl-C</code>, <code>Ctrl-V</code>.
	</p>

	<!-- Definition of context menu -->	
	<ul id="myMenu" class="contextMenu">
		<li class="edit"><a href="#edit">Edit</a></li>
		<li class="cut separator"><a href="#cut">Cut</a></li>
		<li class="copy"><a href="#copy">Copy</a></li>
		<li class="paste"><a href="#paste">Paste</a></li>
		<li class="delete"><a href="#delete">Delete</a></li>
		<li class="quit separator"><a href="#quit">Quit</a></li>
	</ul>

	<!-- Definition tree structure -->	
	<div id="tree">
		<ul>
			<li id="id1" title="Look, a tool tip!">item1 with key and tooltip
			<li id="id2" class="activate">item2: activated on init
			<li id="id3" class="folder">Folder with some children
				<ul>
					<li id="id3.1">Sub-item 3.1
					<li id="id3.2">Sub-item 3.2
				</ul>

			<li id="id4" class="expanded">Document with some children (expanded on init)
				<ul>
					<li id="id4.1">Sub-item 4.1
					<li id="id4.2">Sub-item 4.2
				</ul>

			<li id="id5" class="lazy folder">Lazy folder
		</ul>
	</div>

	<div>Selected node: <span id="echoActivated">-</span></div>

	<p class="description">
		This sample uses the jQuery Context Menu Plugin by Cory S.N. LaViska.<br>
		Visit http://abeautifulsite.net/notebook/80 for usage and more information.<br>
		(An online connection is required, because this plugin  is included from 
		the abeautifulsite.net server.)
	</p>

	<!-- Start_Exclude: This block is not part of the sample code -->
	<hr>
	<p class="sample-links  no_code">
		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
		<a class="hideOutsideFS" href="#">Link to this page</a>
		<a class="hideInsideFS" href="samples.html">Example Browser</a>
		<a href="#" class="codeExample">View source code</a>
	</p>
	<!-- End_Exclude -->
</body>
</html>
